/**
* 功能描述：基础时间范围选择器样式表
* @author jin xiaohang
* @date 2022/9/21 13:57
*/
@import "src/style/mixins/index";


//布局相关
@include b(base-time-range-picker-layout){
  min-width: 600px;
  min-height: 300px;
  position: relative;

  //时间范围面板布局
    .#{$namespace}-base-time-range-picker-panel-layout{
      width: 63%;
      height: 50%;
      margin-top: 5px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      position: absolute;

      //左侧待选面板布局
      .#{$namespace}-base-time-range-picker-panel-left-layout{
          display: flex;
          flex-direction: row;
          width: 49%;
          height: 100%;
          border-right-style: solid;
          border-right-width: 1px;

        //左侧面板项布局
        .#{$namespace}-base-time-range-picker-panel-left-select-layout{
            display: flex;
            flex-direction: column;
            width: 50%;
        }
      }

      //右侧面板布局
      .#{$namespace}-base-time-range-picker-panel-right-layout{
          display: flex;
          flex-direction: row;
          width: 50%;
          height: 100%;
          padding-left: 2px;

        //右侧面板项布局
        .#{$namespace}-base-time-range-picker-panel-right-select-layout{
          display: flex;
          flex-direction: column;
          width: 50%;
        }
      }
    }
}


//样式相关
@include b(base-time-range-picker-style){

  //时间范围面板样式
  .#{$namespace}-base-time-range-picker-panel-style{
    //border-style: solid;
    //border-width: 2px;
    box-shadow: 0 2px 8px #00000026;

    //左侧面板样式
    .#{$namespace}-base-time-range-picker-panel-left-style{
      overflow: hidden;
      &:hover{
        overflow-y:scroll ;
      }
      span{
        cursor:pointer;

        //鼠标悬停
        &:hover{
          background-color: $color-text-secondary;
        }

        //聚焦 激活
        &:focus &:active{
          background-color: $color-text-primary ;
        }
      }
    }

    //右侧面板样式
    .#{$namespace}-base-time-range-picker-panel-right-style{
      overflow: hidden ;
      &:hover{
        overflow-y:scroll ;
      }
      span{
        cursor:pointer;
        &:hover{
          background-color: $color-text-secondary;
        }
        &:focus &:active{
          background-color: $color-text-primary ;
        }
      }
    }
  }

}